<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2021-09-21
  Time: 15:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<style type="text/css">
    table
    {

        border-collapse: collapse;
        text-align: center;
    }
    table td, table th
    {   text-align: center;
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
        width: 20px;
    }
    table thead th
    {
        background-color: #CCE8EB;
        width: 50px;
    }
    table tr:nth-child(odd)
    {
        background: #fff;
    }
    table tr:nth-child(even)
    {
        background: #F5FAFA;
    }
</style>
<div class="data_list">
    <div class="data_list_title">
        <span class="glyphicon glyphicon-eye-open"></span>&nbsp;查看云记
    </div>
    <div>


        <div class="note_title"><h2>${note.title}</h2></div>
        <div class="note_info">
            发布时间： <fmt:formatDate value="${note.pubTime}" pattern="yyyy-MM-dd HH:mm:ss"/> &nbsp;&nbsp;
            云记类别：${note.typeName}
            发布者：${note.uname}
        </div>
        <div class="note_content">
            <p>${note.content}</p>
        </div>
        <div class="note_btn" style="text-align: center">
            <button class="btn btn-primary" type="button" onclick="update(${note.noteId})" <c:if test="${selfcode==0}">style="display: none" </c:if> >修改</button>
            <button class="btn btn-danger" type="button" onclick="del(${note.noteId})"  <c:if test="${selfcode==0}">style="display: none" </c:if>>删除</button>
            <button class="btn btn-info" type="button" onclick="showcomment()" >评论</button>
            <button class="btn btn-success" type="button" onclick="like(${note.noteId})"  <c:if test="${islike==1}">style="display: none" </c:if> >点赞</button>
            <button class="btn btn-warning" type="button" onclick="unlike(${note.noteId})" <c:if test="${islike==0}">style="display: none" </c:if>  >取消点赞</button>
            <label>点赞数：</label> <label>${totallike}</label>
        </div>
      <div class="comment" style="text-align: center ">
          <input type="text" id="comment" name="comment" placeholder="请在此处输入评论" style="width: 400px;display: none" >
          <button class="btn btn-info" id="commentbtn" type="button" onclick="comment(${note.noteId})" style="display: none">评论</button>

      </div>
    </div>

    <div >
    <h1 style="text-align: center;">评论区</h1>
        <c:if test="${empty comList}">
            <h3 style="text-align: center">快来抢评论区沙发！</h3>
        </c:if>
        <c:if test="${!empty comList}">
            <table  class="table">
                <tbody>
                <tr>
                    <th>评论者</th>
                    <th>评论内容</th>
                </tr>
                <c:forEach items="${comList}" var="item">
                    <tr>
                        <td>${item.uname}</td>
                        <td>${item.content}</td>
                    </tr>
                    <%--                <li>${item.pubTime}&nbsp;&nbsp;&nbsp;${item.uname}&nbsp;&nbsp;&nbsp;${item.typeName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="modify?actionName=detail&noteId=${item.noteId} ">${item.title}</a> </li>--%>
                </c:forEach>
                </tbody>
            </table>
        </c:if>
    </div>



</div>

<script type="text/javascript">
    function update(noteId){
      window.location.href="modify?actionName=modify&noteId="+noteId;
    }
    function showcomment(){
        document.getElementById("comment").style.display="inline";
        document.getElementById("commentbtn").style.display="inline";
    }
    function unlike(noteId){
        window.location.href="modify?actionName=unlike&noteId="+noteId;

    }
    function like(noteId){
        window.location.href="modify?actionName=like&noteId="+noteId;
    }
   function  comment(noteId){
        var comment=$('#comment').val();
       $('#comment').val("");
       document.getElementById("comment").style.display="none";
       document.getElementById("commentbtn").style.display="none";
       window.location.href="modify?actionName=addComment&noteId="+noteId+"&comment="+comment;
   }

    function del(noteId){
        //使用sweet-alert
        swal({title: "删除提示",   //弹出框的title
            text: "确定删除吗？",  //弹出框里面的提示文本
            type: "warning",    //弹出框类型
            showCancelButton: true, //是否显示取消按钮
            confirmButtonColor: "#DD6B55",//确定按钮颜色
            cancelButtonText: "取消",//取消按钮文本
            confirmButtonText: "是的，确定删除！"//确定按钮上面的文档
        }).then(function() {
          $.ajax({
              type:"post",
              url:"modify",
              data:{
                  actionName:"delete",
                  noteId:noteId
            },
              success:function (code){
                  if(code==1){
                      window.location.href="index";
                  }else{
                      swal("","<h3>删除失败！</h3>","error");
                  }
              }

          })

        });
    }







</script>

</div>